<template>
	<view id="cart">
		
		<view class="wrap">
			<view class="shop">
				
				<u-swipe-action :show="item.show" :index="index" 
							v-for="(item, index) in list" :key="item.id" 
							@click="click" @open="open"
							:options="options"
						>
							<view class="shop_name">乌云下旗舰店 ></view>
								<view class="item u-border-bottom">
									<!-- <u-checkbox-group> -->
										<!-- <u-checkbox style="display: flex;" v-model="checked" shape="circle"></u-checkbox> -->
									<!-- </u-checkbox-group> -->
									
									<u-checkbox-group style="display: flex;">
											<u-checkbox 
												shape="circle"
												@change="checkboxChange" 
												v-model="item.checked" 
												:name="item.name"
												
											></u-checkbox>
									</u-checkbox-group>
									
									<image mode="aspectFill" :src="item.goodsThumbUrl" />
									<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
									<view class="title-wrap">
										<view class="u-line-1" style="font-weight: bold;font-size:32rpx;width: 50%;">{{item.goodsName}}</view>
										<text style="color: #f03867;">¥{{item.price}}</text>
									</view>
								</view>
						</u-swipe-action>
			</view>
			<view style="position: fixed;bottom: 0;padding:10rpx;width: 100%;z-index: 5;background-color: #fff;">
				<view style="display: inline-block;" @click="checkedAll">
					<u-checkbox style="display: inline-block;" v-model="allCheck" shape="circle">全选</u-checkbox>
				</view>
				<text style="color: #f03867;font-size: 32rpx;font-weight: bold;">总计：¥{{totalCount}}</text>
				<button style="width: 40%;background-color: #f03867;color: #fff;text-align: center;margin: 0;vertical-align: middle;margin-left:20rpx;display: inline-block;">结算</button>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { jingxuan } from '../../../util/api/request.js'
	export default {
		data() {
			return {
				list: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				allCheck: false,
				options: [
					{
						text: '收藏',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				
				totalCount: 0
							
				
			};
		},
		onLoad() {
			this.getShop();
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e);
				
				this.list.forEach(item=>{
					if(e.name == item.goodsId) item.checked = !item.checked
				})
				
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			click(index, index1) {
							if(index1 == 1) {
								this.list.splice(index, 1);
								this.$u.toast(`删除了第${index}个cell`);
							} else {
								this.list[index].show = false;
								this.$u.toast(`收藏成功`);
							}
						},
						// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
						open(index) {
							// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
							// 原本为'false'，再次设置为'false'会无效
							this.list[index].show = true;
							this.list.map((val, idx) => {
								if(index != idx) this.list[idx].show = false;
							})
						},
			// 全选
			checkedAll() {
				let flag = true;
				let that = this;
				console.log(this.allCheck) 
				if(!this.allCheck){
					flag = false
					that.totalCount = 0;
				}
				this.list.map(val => {
					val.checked = flag;
					if(flag)that.totalCount += JSON.parse(val.price);
				})
				this.allCheck = flag;
			},
			getShop() {
				let that = this;
				/**
				 * 精选商品
				 * pub_id 接口秘钥  Y
				 * type 1-实时热销，2-精选好货 默认1
				 * source 来源 jd-京东,vip-唯品会,pdd-拼多多,kaola-考拉,taobao-淘宝 默认vip
				 * page 页码 默认 1
				 * pageSize 每页显示多少，默认20
				 * sub_share_rate  分成比例 1代表100%，0.9代表90%，默认1
				 */
				jingxuan({}).then(res=>{
					
					res.data.forEach(item=>{
						item.checked = false;
						item.name = item.goodsId;
					})
					that.list = res.data;
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	#cart{
		background-color:#f8f8f8;
		
		.wrap{
			padding: 32rpx;
			
			.shop{
				// background-color: #fff;
				padding:20rpx;
				border-radius: 10rpx;
				margin-bottom: 100rpx;
				
				.shop_name{
					padding:20rpx 10rpx;
					font-size: 32rpx;
				}
			}
		}
	}
	
	.item {
			display: flex;
			padding: 20rpx;
		}
		
		image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 12rpx;
		}
		
		.title {
			text-align: left;
			font-size: 28rpx;
			color: $u-content-color;
			margin-top: 20rpx;
		}
</style>